<template>
  <div>
    <Card v-if='isbodyList'>
      <div class="p-relative">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item search-btn">
            <Button type="primary" @click='create'>添加</Button>
          </div>
          <div class="flex-item">
            <Input v-model="searchObj.name" placeholder="请输入规格模板名称"></Input>
          </div>
          <div class="flex-item search-btn" @click="search">
            <Button type="primary">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="reset">
            <Button>重置</Button>
          </div>
        </div>
      </div>

      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">

            <Button type='primary' @click="edit(row, index)" size='small'>修改</Button>
            <Button type='error' @click="del(row, index)" size='small'>删除</Button>
          </div>
        </template>
      </Table>

      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>
    </Card>
    <!-- 添加修改 -->
    <Card v-else>
      <Tabs type="card">
        <TabPane label="基本信息">
          <BaseInfo class='marginbottom100' :prodClassList='data.prodClassList'></BaseInfo>
        </TabPane>

      </Tabs>
    </Card>

    <!-- 底部操作按钮 -->
    <div class="footer-fixed-action" v-show="!isbodyList">
      <div class="flex-start-box">
        <Button type="primary" @click='save("prodGroupBasicObj")'>保存</Button>
        <Button class='marginleft10' @click='back'>返回</Button>
      </div>
    </div>
    <!-- 添加弹窗 -->
    <Modal v-model="createModal" :title="createTitle" width='1000'>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="名称" prop="realname">
          <Input v-model="formValidate.realname" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="分类" prop="mobile">
          <Select v-model="formValidate.role_id" placeholder="请选择门店类型">
            <Option value="beijing">店员</Option>
          </Select>
        </FormItem>
        <FormItem label="省市区" prop="password">
          <Select v-model="formValidate.role_id" placeholder="请选择省市区">
            <Option value="beijing">店员</Option>
          </Select>
        </FormItem>
        <FormItem label="详细地址" prop="realname">
          <Input v-model="formValidate.realname" placeholder="请输入详细地址" type='textarea'></Input>
        </FormItem>
        <FormItem label="地图设置" prop="realname">
          <Input v-model="formValidate.realname" placeholder="请输入详细地址"></Input>
        </FormItem>
        <FormItem label="营业时间" prop="role_id">
          <Input v-model="formValidate.realname" placeholder="请输入详细地址"></Input>
        </FormItem>
        <FormItem label="电话" prop="role_id">
          <Input v-model="formValidate.realname" placeholder="请输入电话"></Input>
        </FormItem>

      </Form>
      <div slot="footer">

        <Button type="primary" @click="save('formValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
      </div>
    </Modal>

    <!-- 查看弹窗 -->
    <!-- @on-ok="ok" @on-cancel="cancel" -->
    <Modal v-model="detailModal" title="查看" width='80%'>
      <div class="detail-table">
        <div class="base-info">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">基本信息</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">门店：</span> 测试门店</Col>
            <Col span="8"><span class="font-gray">下单时间：</span>测试门店</Col>
            <Col span="8"><span class="font-gray">月卡过期：</span>测试门店</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">付款号：</span>测试门店</Col>
            <Col span="8"><span class="font-gray">订单号：</span>测试门店</Col>
            <Col span="8">
            <span class="font-gray">订单状态：</span><span class="font-orange">已租赁，待归还</span>
            <Button type="primary" ghost shape="circle" size='small' class='marginleft10' @click='pay'>赔付</Button>
            <Button type="primary" ghost shape="circle" size='small' class='marginleft10' @click='account'>结算</Button>
            </Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">产品名称：</span>测试门店</Col>
            <Col span="8"><span class="font-gray">金额：</span><span class="font-orange">180</span></Col>
            <Col span="8"><span class="font-gray">付款方式：</span><span class="font-orange">微信支付</span></Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">用户昵称：</span>xd</Col>
            <Col span="8"><span class="font-gray">租金：</span>12.00</Col>
            <Col span="8"><span class="font-gray">实租天数：</span>15</Col>
          </Row>
        </div>
        <div class="order-record margin-top-10">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">订单日志</Col>
          </Row>
          <Row class='row-main-title table-head-bg'>
            <Col span="3" class='padding10'>操作人</Col>
            <Col span="3" class='border-left'>订单状态</Col>
            <Col span="12" class='border-left'>基本信息</Col>
            <Col span="3" class='border-left'>操作说明</Col>
            <Col span="3" class='border-left'>操作时间</Col>
          </Row>
          <Row class='row-main-content' v-for='(item,index) in 3'>
            <Col span="3"><span>xd</span></Col>
            <Col span="3"><span class="font-orange">待付款</span></Col>
            <Col span="12"><span>客户下单，付款号:20210222155135603362874dac62587,订单号：H202102221551356033628752fa0</span></Col>
            <Col span="3"><span class="font-gray">-</span></Col>
            <Col span="3"><span class="font-gray">2011-11-20</span></Col>
          </Row>

        </div>
      </div>
      <div slot="footer">
        <Button @click='detailModal=false'>关闭</Button>
      </div>
    </Modal>

    <!-- 删除弹窗 -->
    <Modal v-model="delModal" title="提示">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除数据？</p>
      <div slot="footer">
        <Button @click='delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>
    <!-- 结算弹窗 -->
    <Modal v-model="accountModal" title="结算">
      <Form ref="accountformValidate" :model="accountformValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="原交易号" prop="code">
          <Input v-model="accountformValidate.realname"></Input>
        </FormItem>
        <FormItem label="金额" prop="momey">
          <Input v-model="accountformValidate.momey"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='accountModal=false'>取消</Button>
        <Button type="primary">确定</Button>
      </div>
    </Modal>
    <!-- 赔付弹窗 -->
    <Modal v-model="payModal" title="赔付">
      <Form ref="payformValidate" :model="payformValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="原交易号" prop="code">
          <Input v-model="payformValidate.money" type="textarea"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='payModal=false'>取消</Button>
        <Button type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
// 接口
import {
  getList,
  add,
  addNorms,
  put,
  del,
  getNormsClass,
  getNormsValueTemplateList

} from '@/api/product-group/product-normstemplate'
import {
  mapState,
  mapMutations
} from 'vuex'
import {
  permission
} from '@/config/permission.js'
import BaseInfo from './base-info/base-info.vue'
import {
  tableOption
} from '@/data/product-group/product-normstemplate/product-normstemplate.js'
import Tables from '_c/tables'
import {
  getTableData
} from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables,
    BaseInfo
  },
  created () {
    let _this = this
    this.$nextTick(function () {
      _this.role_Add = permission(this.roles, 'product/insertEnterNormsTemplate')
      _this.role_Edit = permission(this.roles, 'product/updateNormTemplate')
      _this.role_Del = permission(this.roles, 'product/deleteNormsTemplate')
    })
    this.getList()
  },
  watch: {

  },
  mounted () {

  },
  computed: {
    ...mapState({
      roles: state => state.user.roles,
      productNormstemplateObj: state => state.share.productNormstemplateObj

    })
  },
  data () {
    return {
      rowId: '', // 行id
      tableOption: tableOption,
      data: {
        list: []
      },
      isbodyList: true,
      delId: '',
      switch1: false,
      createTitle: '新增',
      isAdd: true, // 新增true,修改false
      isDisable: false, // 新增时提交按钮点击状态
      isLoading: false, // 新增时提交按钮loading状态

      loadingText: '',
      tableData: [],
      // 查询参数
      searchObj: {
        name: ''
      },
      // 分页
      page: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      // 分页end
      // 弹窗状态
      createModal: false, // 新增，修改弹窗
      detailModal: false, // 查看弹窗
      delModal: false, // 删除弹窗
      payModal: false, // 弹窗
      accountModal: false, // 弹窗
      // 弹窗状态end//赔付弹窗
      formValidate: {
        realname: '',
        mobile: '',
        password: '',
        role_id: '',
        store_id: '',
        isStoreManager: ''
      },
      // 赔付
      payformValidate: {

      },
      // 结算
      accountformValidate: {

      },
      ruleValidate: {
        realname: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        role_id: [{
          required: true,
          message: '请选择角色',
          trigger: 'change'
        }],
        mobile: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'change'
        }, {
          pattern: /^1[3456789]\d{9}$/,
          message: '手机号码格式不正确',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'change'
        }]

      },
      // 权限标识
      role_Add: false,
      role_Edit: false,
      role_Del: false

      // 权限结束
    }
  },
  methods: {
    ...mapMutations([
      'setProductNormstemplateObj' // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

    ]),
    // 列表数据
    getList () {
      let _this = this
      _this.data.list = [] // 重置
      let params = {
        page: this.page.current,
        name: this.searchObj.name,
        size: this.page.pageSize
      }

      getList(params).then(res => {
        if (res.data.status == 1) {
          let result = res.data.data
          _this.data.list = result.list
          _this.page.total = result.total
        } else {
          // axios响应拦截

        }
      }).catch(function (error) {
        // 异常
        console.log(error)
      })
    },
    changepage (e) {
      this.page.current = e
      this.getList()
    },
    back () {
      this.isbodyList = true
    },
    // 新增
    create () {
      // if(!this.role_Add){
      //   let config = {
      //     content: '没有权限访问',
      //     background: true
      //   }
      //   this.$Message.error(config)
      //   return
      // }
      this.setProductNormstemplateObj({}) // 初始化数据
      this.isbodyList = false
      this.isAdd = true
      this.formValidate = {} // 表单重置
      this.handleReset('formValidate') // 验证重置
    },
    // 修改
    edit(row) {
      // if (!this.role_Edit) {
      //   let config = {
      //     content: '没有权限访问',
      //     background: true
      //   }
      //   this.$Message.error(config)
      //   return
      // }
      this.rowId = row.id
      let _this = this
      this.setProductNormstemplateObj({}) // 初始化数据
      this.isbodyList = false
      let params = {
        id: row.id
      }
      put(params).then(res => {
        if (res.data.status == 1) {
          let result = res.data.data
          // let norms = [];

          // if (result.property_value_name.length) {
          //   norms=result.property_value_name.map(function(cv,i){
          //     return {"property_value_name":cv,"property_value_id":result.property_value_id[i]}
          //   })
          // }
          // vuex
          let obj = {
            template_norms_property_id: result.property_id, // 顶级id?????
            name: result.template_name,
            template_norms_property_name: result.property_name,
            norms: result.property_items
          }
          _this.setProductNormstemplateObj(obj)

          // _this.data.list=result;
        } else {
          let config = {
            content: res.data.message || res.data.msg,
            background: true
          }
          _this.$Message.error(config)
        }
      }).catch(function (error) {
        // 异常
        _this.createModal = false
        console.log(error)
      })
    },

    // 查看
    detail () {
      this.detailModal = true
    },
    // 删除
    del (row) {
      // if (!this.role_Del) {
      //   let config = {
      //     content: '没有权限访问',
      //     background: true
      //   }
      //   this.$Message.error(config)
      //   return
      // }
      this.delType = 1

      this.delModal = true
      this.delId = row.id
      // 删除接口
    },
    confirmDel () {
      let _this = this
      let obj = {
        id: this.delId
      }
      if (this.delType == 1) {
        del(obj).then(res => {
          if (res.data.status == 1) {
            // let result=res.data.data;
            // _this.data.list=result;
            _this.delModal = false
            _this.$Message.success('操作成功')
            _this.getList() // 重新刷新数据
          } else {
            _this.delModal = false
            // axios响应拦截
          }
        }).catch(function (error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      }
    },
    // 刷新
    refresh () {
      this.searchObj = {} // 清空搜索框
      this.getList()
    },
    // 重置
    reset () {
      this.searchObj = {} // 清空搜索框
      this.getList()
    },
    // 查询
    search () {
      this.getList()
    },
    handleDelete (params) {
      console.log(params)
    },
    save (name) {
      let _this = this
      if (!this.productNormstemplateObj.name) {
        this.$Message.error('请输入模板名称')
        return
      }
      if (!this.productNormstemplateObj.template_norms_property_id) {
        this.$Message.error('请选择顶级规格分类')
        return
      }
      if (!this.productNormstemplateObj.norms) {
        this.$Message.error('请选择规格')
        return
      }
      if (_this.isAdd) {
        let basicObj = {
          id: _this.rowId, // 修改时候，模板id
          is_norms: this.productNormstemplateObj.is_norms,
          name: this.productNormstemplateObj.name, // 模板名称
          template_norms_property_id: this.productNormstemplateObj.template_norms_property_id // 顶级规格分类id
        }

        let obj = {
          basic: basicObj,
          norms: this.productNormstemplateObj.norms,
          expand: {},
          property: []

        }
        // 新增接口
        add(obj).then(res => {
          if (res.data.status == 1) {
            // let result=res.data.data;
            // _this.data.list=result;
            _this.isbodyList = true
            _this.getList() // 重新刷新数据
            _this.$Message.success('操作成功')
          } else {
            _this.isbodyList = true
            // axios响应拦截
          }
        }).catch(function (error) {
          // 异常
          _this.createModal = false
          console.log(error)
        })
      } else {

      }
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 赔付
    pay () {
      this.payModal = true
    },
    // 结算
    account () {
      this.accountModal = true
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    change (status) {
      this.$Message.info('开关状态：' + status)
    }
  }

}
</script>

<style lang="scss">
  @import "./index";
</style>
